<template>
	<view class="choose-community">
		<view class="current-location">
			<view class="title">
				房屋信息
			</view>
			<view class="content">
				<text>{{roomInfo}}</text>
				<view class="right">
					<view class="success">
						审核通过
					</view>
					<!-- <view class="waiting">
						审核中
					</view>
					<view class="error">
						审核通过
					</view> -->
				</view>
			</view>
		</view>
		<view class="community">
			<view class="title">
				业主信息
			</view>
			<u--form labelAlign="left" ref="form1">
				<u-form-item label="姓名" borderBottom labelWidth="208rpx">
					<u--input v-model="form.username" border="none"></u--input>
				</u-form-item>
				<u-form-item label="性别" borderBottom labelWidth="208rpx">
					<u--input v-model="form.gender" border="none"></u--input>
				</u-form-item>
				<u-form-item label="手机号" borderBottom labelWidth="208rpx">
					<u--input v-model="form.mobile" border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<u-cell-group customStyle="backgroundColor:#fff;margin-top:15rpx" border="false">
			<u-cell title="本人身份证照片"></u-cell>
		</u-cell-group>
		<view class="editHome" @click="goEditHome">
			<image src="../../static/icon/revise.png"></image>
			<view class="text">
				修改房屋信息
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roomInfo: this.$store.state.house.roomInfo,
				form: {
					username: '法外狂徒-张三',
					gender: '男',
					mobile: '17866666666'
				}
			}
		},
		methods: {
			goEditHome() {
				uni.navigateTo({
					url: '../editHome/editHome'
				})
			}
		}
	}
</script>

<style lang="scss">
	.choose-community {
		height: 100%;
		background-color: #FAFAFA;

		.current-location {
			.title {
				padding: 15rpx 15rpx;
				line-height: 43rpx;
				color: #979797;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 12px;
			}

			.content {
				width: 750rpx;
				height: 102rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #333;
				}

				.right {
					.success {
						width: 128rpx;
						height: 48rpx;
						color: #27AE60;
						border-radius: 10rpx;
						background: #EBF8F0;
						font-size: 24rpx;
						line-height: 48rpx;
						text-align: center;
					}

					.waiting {
						width: 104rpx;
						height: 48rpx;
						border-radius: 10rpx;
						background: #E5F0FB;
						text-align: center;
						line-height: 48rpx;
						font-size: 24rpx;
						color: #2D9CDB;
					}

					.error {
						width: 128rpx;
						height: 48rpx;
						color: #EB5757;
						border-radius: 10rpx;
						background: #FCF2ED;
						font-size: 24rpx;
						line-height: 48rpx;
						text-align: center;
					}
				}

			}
		}

		.community {
			.title {
				padding: 15rpx 15rpx;
				line-height: 43rpx;
				color: #979797;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 12px;
			}

			.u-form {
				background-color: #fff;

				.u-form-item__body__left {
					margin-left: 30rpx;
				}
			}
		}

		.editHome {
			height: 213rpx;
			width: 750rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 10rpx;
			}

			.text {
				color: #333333;
				font-family: PingFang SC;
				font-weight: regular;
				font-size: 30rpx;
				line-height: 1.5;
				text-align: left;
			}
		}
	}
</style>
